<template>
  <tab-bar>
    <mt-header title="办事大厅" slot="header"></mt-header>
    <div class="service" slot="main">
      <div class="list" v-for="(item, k) in fullList" :key="k">
        <span class="common-title">{{item.title}}</span>
        <div class="short-cut" :class="`color-${k}`">
          <router-link class="item" v-for="(val, key) in getList(item, k)" :key="key" :to="val.link">
            <i class="xffont" :class="val.icon"></i>
            <span>{{val.title}}</span>
          </router-link>
        </div>
        <div class="more" v-if="item.list.length > 4" @click="toggleCollapse(item, k)">
          <div v-if="!collapse[k]">
            <span>更多服务</span>
            <i class="xffont xf-more"></i>
          </div>
          <div v-else>
            <span>收起</span>
            <i class="xffont xf-reduce_circle"></i>
          </div>
        </div>
      </div>
    </div>
    <transition name="router" mode="out-in">
      <router-view></router-view>
    </transition>
  </tab-bar>
</template>
<script>
  import TabBar from '../../layouts/tab-bar/index.vue'
  import serviceList from '../../common/js/service_list'
  import DefaultLayout from '../../layouts/default-layout/default-layout'

  export default {
    components: {DefaultLayout, TabBar},
    data() {
      return {
        fullList: serviceList,
        collapse: new Array(serviceList.length)
      }
    },
    methods: {
      toggleCollapse(item, key) {
        // this.$router.push({name: 'serviceMore', params: {id: key}})
        this.collapse.splice(key, 1, !this.collapse[key])
      },
      getList(item, key) {
        return this.collapse[key] ? item.list : item.list.slice(0, 4)
      }
    }
  }
</script>
<style lang="scss" scoped>
  @import "../../common/style/variable";
  @mixin color($co) {
    .xffont{
      color: $co;
    }
  }
  .color-0{  @include color($primary);  }
  .color-1{  @include color(#da485c);  }
  .color-2{  @include color(#3e53c2);  }
  .color-3{  @include color(#289abd);  }
  .color-4{  @include color(#84b03d);  }
  .short-cut{
    display: flex;
    margin: 0 0 3px 0;
    padding: .14rem 0;
    background: #fff;
    flex-wrap: wrap;
    .item{
      width: 25%;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: .1rem .1rem;
      text-align: center;
      border-radius: 5px;
      @include active;
      .xffont{
        font-size: .5rem;
      }
      span{
        margin: .1rem 0 0 0;
      }
    }
  }
  .common-title{
    display: inline-block;
    padding: 0 0 0 .2rem;
    border-left: 5px solid $primary;
    font-size: .3rem;
    font-weight: 600;
  }
  .list{
    background: #fff;
    padding: .2rem .2rem .1rem .2rem;
    margin: 0 0 3px 0;
    position: relative;
    .more{
      position: absolute;
      top: .2rem;
      right: .2rem;
    }
  }
</style>
